<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>


    <link rel="stylesheet" type="text/css" th:href="@{/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/register.css}">
    <script th:src="@{/js/layui.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>
    <script th:src="@{/js/vue.min.js}"></script>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

</head>
<body>


<div class="box">
    <div id="register" class="layui-row">

        <form th:action="@{/register}" method="post" enctype="multipart/form-data" >
            <div class="layui-col-md6 layui-col-xs6 imageDiv">
                <div id="image">
                    <input id="uploadImg" type="file" accept="image/*" name="image" v-on:change="change($event)">
                    <img id="userImage" :src="src" class="layui-nav-img" v-on:click="upload($event)">
                </div>
            </div>

            <div class="layui-col-md6 layui-col-xs6 registerDiv">
                <div class="head">
                    <h1>注册</h1>
                </div>
                <div class="form-info">

                    <div class="login-field-box layui-row">
                        <div class="layui-col-md1 layui-col-xs1">
                            <img id="user-head-img" class="i" th:src="@{/images/user.png}">
                        </div>
                        <div class="layui-col-md11 layui-col-xs11">
                            <input id="user" class="login-field" name="username" type="text" required="required"
                                   autocomplete="off" placeholder="账号" v-model="account" v-on:blur="check"
                                   v-on:keyup="check">
                            <i v-if="test == 1" class="layui-icon layui-icon-ok-circle"></i>
                            <i v-else-if="test == 2" class="layui-icon layui-icon-close-fill"></i>
                        </div>
                        <div class="if">
                            {{message}}
                        </div>

                    </div>

                    <div id="message-box" class="login-field-box layui-row">
                        <div class="layui-col-md1 layui-col-xs1">
                            <img class="i" th:src="@{/images/lock.png}">
                        </div>
                        <div class="layui-col-md11 layui-col-xs11">
                            <input  class="login-field"  type="password" required="required"
                                   autocomplete="off" placeholder="密码" v-model="pass" v-on:blur="check2">
                            <input id="pass" name="password" type="password" hidden="hidden" v-model="password">
                            <i v-if="cc == 1" class="layui-icon layui-icon-ok-circle"></i>
                            <i v-else-if="cc == 2" class="layui-icon layui-icon-close-fill"></i>
                        </div>
                    </div>
                    <div  class="login-field-box layui-row">
                        <div class="layui-col-md1 layui-col-xs1">
                            <img class="i" th:src="@{/images/lock.png}">
                        </div>
                        <div class="layui-col-md11 layui-col-xs11">
                            <input  class="login-field"  type="password" required="required"
                                    autocomplete="off" placeholder="确认密码" v-model="doublePass" v-on:keyup="keyup">
                            <i v-if="c == 1" class="layui-icon layui-icon-ok-circle"></i>
                            <i v-else-if="c == 2" class="layui-icon layui-icon-close-fill"></i>
                        </div>
                        <div class="if">
                            {{doubleMessage}}
                        </div>
                    </div>

                    <div id="sub" class="submit-box">
                        <button v-on:click="submit($event)" id="submit"
                                class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal" type="submit">注册
                        </button>
                    </div>


                </div>

                <div class="login-box">
                    <p id="login">已有账号!<a th:href="@{/login}">立即登录</a></p>
                </div>
            </div>

        </form>


    </div>
</div>

</body>
<script type="text/javascript">
    let vue = new Vue({
        el: '#register',
        data: {
            account: '',
            pass: '',
            password:'',
            doublePass:'',
            message: '',
            doubleMessage:'',
            src: 'http://localhost:8080/pictures/blank.svg',
            c:3,
            test:3,
            cc:3,
        },
        methods: {
            check: function () {

                //符合请求的账号格式才发送异步请求
                let usernamePattern = /^\d{12}$/;
                let userCheck = usernamePattern.test(this.account);

                if (!userCheck) {
                    this.test = 3;
                    return;
                }


                //判断有没有这一个用户
                axios({
                    url: 'http://localhost:8080/check',
                    method: 'get',
                    params: {
                        username: this.account
                    }
                }).then((response) => {

                    if (response.data != '') {
                        this.test = 2;
                        this.message = '这个账号已经被注册，请更换账号!';
                        document.getElementById('message-box').style.marginTop = '9px'
                    } else {
                        this.test = 1;
                        this.message = '';
                        document.getElementById('message-box').style.marginTop = '30px'
                    }
                })

            },
            check2: function () {
                let passwordPattern = /^[a-zA-Z0-9]{8,12}$/;
                let passCheck = passwordPattern.test(this.pass);

                if (!passCheck) {
                    if (this.pass.length < 8) {
                        this.cc = 3;
                    } else {
                        this.cc = 2;
                    }
                } else {
                    this.cc = 1;
                }
            },
            //阻止注册已经有的用户名和防止空表提交
            submit: function (event) {


                let usernamePattern = /^\d{12}$/;
                let userCheck = usernamePattern.test(this.account);

                if (!userCheck) {
                    var str = "输入正确的账号，格式为12位数字!"
                    layer.alert(str, {
                        time: 3000
                    })
                    event.preventDefault();
                    return;
                }

                let passwordPattern = /^[a-zA-Z0-9]{8,12}$/;
                let passCheck = passwordPattern.test(this.pass);

                if (!passCheck) {
                    var str = "输入的密码格式不正确，格式为{数字+字母}的8到12位数"
                    layer.alert(str, {
                        time: 3000
                    })
                    event.preventDefault();
                    return;
                }

                if (this.c != 1) {
                    var str = "前后输入的密码不一致!"
                    layer.alert(str, {
                        time: 3000
                    })
                    event.preventDefault();
                    return;
                }

                this.password = md5(this.pass);

            },
            //当点击图片，点击图片上传按钮
            upload: function (event) {
                var upload = document.getElementById("uploadImg");
                upload.click();
            },
            change: function (event) {
                let reader = new FileReader();
                vue.$data.file = event.currentTarget.files[0];
                reader.readAsDataURL(event.currentTarget.files[0]);
                reader.onload = function (e) {
                    vue.$data.src = this.result;
                }
            },
            keyup: function () {

                if (this.pass.length == this.doublePass.length) {
                    if (this.pass != this.doublePass) {
                        this.doubleMessage = '前后输入的密码不一致';
                        this.c = 2;
                        document.getElementById('sub').style.marginTop = '19px'
                    } else {
                        this.doubleMessage = '';
                        this.c = 1;
                        document.getElementById('sub').style.marginTop = '40px'
                    }
                } else {
                    console.log(this.doublePass)
                    console.log(this.pass)
                    if (this.doublePass.length < this.pass.length) {
                        this.doubleMessage = '';
                        this.c = 3;
                        document.getElementById('sub').style.marginTop = '40px'
                    } else {
                        this.doubleMessage = '前后输入的密码不一致';
                        this.c = 2;
                        document.getElementById('sub').style.marginTop = '19px'
                    }
                }
            }
        }
    })
</script>


</html>